<template>
  <div class="wai">
    <nav class="toback">
      <router-link to="/">
        <!-- <Icon type="chevron-left" class="toleft" /> -->
        <span class="fl"><Icon type="ios-close-empty"></Icon></span>
      </router-link>
      <!-- <i class="search"></i> -->
      <span>...</span>
      <p>修改密码</p>
    </nav>

    <div class="span_inpnt">
       您好，尊敬的{{phone}}
        <hr class="input_hr"/>
        <div class="input">
          <div class="input_text"><input type="number" v-model="password_old" placeholder="请输入旧密码"></div>
        </div>
        <hr class="input_hr"/>
         <div class="input">
          <div class="input_text"><input type="password" v-model="password" placeholder="请输入新密码"></div>
        </div>
        <hr class="input_hr"/>
         <div class="input">
          <div class="input_text"><input type="password" v-model="password2" placeholder="新密码确认"></div>
        </div>
        <hr class="input_hr"/>
    </div>

    <div class="btn" @click="handleLogin">修改密码</div>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'ChangePassword',
  data () {
    return {
      phone:this.$store.state.user.phone,
      password:'',
      password2:'',
      password_old:'',
      isOldPassword:false,
     }
  },
  mounted () {
    if(!this.$store.state.show){
      this.$router.push({path: '/repayment'});
    }
    this.password=""
    this.password2=""
    this.password_old=""
  },
  methods: {
    handleJiaoyan(){
      if(this.password_old === ''){
        this.$Message.success("请输入旧密码");
        return false;
      }else if(this.password === ''){
        this.$Message.success("请输入新密码");
        return false;
      }else if(this.password2 === ''){
        this.$Message.success("请输入密码确认");
        return false;
      }else if(this.password2 != this.password){
        this.$Message.success("两次输入不一致");
        return false;
      }else{
        return true
      }
    },
    handleLogin () {
      if(this.handleJiaoyan()){
        //来一个旧密码校验
        axios.post('/web/api/user/baselogin',{"password":this.password_old,"phone":this.phone}).then(this.handleLoginInfoSucc)

      }
    },

    handleLoginInfoSucc (res) {
      var data = res.data
      var user = res.data.date
      console.log("data" ,data);
      if(data.code==1){
            axios.post('/web/api/user/updatePassword',{"password":this.password,"phone":this.phone}).then(this.handleUpdateInfoSucc)

      }else{
         this.$Message.success("旧密码不对");
         return false;
      }
    },
    //校验成功
    handleUpdateInfoSucc (res) {
      var data = res.data
      var user = res.data.date
      this.$Message.success(data.message);
      if(data.code==1){
        console.log("data=====",data);
        this.$router.push({path: '/'});
      }else{

      }
    }
  }
}
</script>
<style lang="stylus" scoped>
  .wai
    width 100%
    .toback
      width 100%
      font-size 1.8rem
      line-height 2.6
      border-bottom 1px solid #eee
      p
        text-align center
      .toleft
        float left
        font-size 2.2rem
        color #FF3737
        padding 1rem 2rem
      .search
        display inline-block
        width 2.2rem
        height 2.2rem
        margin 0.8rem 1.6rem
        float right
        // background url('../imgs/2x/icon-search.png') 50% 50% no-repeat
        background-size 1.8rem 1.8rem
      span
        display inline-block
        float right
        font-size 1.8rem
        color #FF3737
        padding 0rem 1rem
      .fl
        float left
        font-size 4rem
        line-height 1.2
    .span_inpnt
      width 95%
      margin-left 2.5%
      height 20rem
      text-align center
      padding-top 0.1rem
      border-radius 2rem
      .input
        margin-left 5%
        margin-top 1rem
        height 4rem
        width 90%
        text-align center
        background #fff
        border-radius 0.2rem
        .input_text
          margin-left 2rem
          margin-top 0.5rem
          float left
          width 4rem
          height 3rem
          input
            width 17rem
            height 3rem
            border none
            outline none
            color  #b3b3b3
    .input_hr
      margin-left 10%
      width 80%
      height:1px
      border:none
      border-top:1px solid #b3b3b3
    .btn
      margin-top 2rem
      margin-left 10%
      width 80%
      height 2.8rem
      background #3b83c5 url(../assets/img/Register/login_btn.png) no-repeat 100% 100%
      text-align center
      line-height 2.8rem
      color #ffffff
      border-radius 2rem
    .div_tishi_text
      float left
      width 49%
      text-align center
      height 3rem
      line-height 3rem
    .div_tishi_xian
      float left
      width 2%
      text-align center
      height 3rem
      line-height 3rem
      color #b3b3b3
    .div_weixin_text
      width 100%
      height 3rem
      text-align center
      line-height 3rem
      color #b3b3b3
    .div_weixin_btn
      margin-top 4rem
      width 100%
      text-align center
      line-height 10rem
      img
        width 5rem
        height 5rem


</style>

